<template>
  <div class="search">
    <!-- 搜索框 -->
    <van-search
      v-model="keyword"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />

 <div v-if="!searching">
            <div class="history">
                <div class="lsjv">
                    <p class="jilu">历史搜索记录</p>
                    <van-icon name="delete-o" @click="clear" />
                </div>
                <van-tag
                    class="tag"
                    plain
                    type="primary"
                    v-for="(item, index) in historyData"
                    :key="index"
                    @click="tagSearch(item)"
                >
                    {{ item }}
                </van-tag>
            </div>
            <div class="hot">
                <p>热门搜索</p>
                <van-tag
                    color="#7232dd"
                    class="tag"
                    plain
                    type="primary"
                    v-for="(item, index) in hotData"
                    :key="index"
                    @click="tagSearch(item.keyword)"
                >
                    {{ item.keyword }}
                </van-tag>
            </div>
        </div>

    <!-- 下拉菜单组件 -->
    <div v-else>
    <Dropmenu
      :filterCategory="filterCategory"
      @transfer="changePriceFn"
      @transfer1="changeKindFn"
    ></Dropmenu>
    <!-- 商品列表组件 -->
    <GoodsList :goodsList="goodsList"></GoodsList>
    </div>
  </div>
</template>

<script>
//引入下拉菜单
import Dropmenu from "@/components/Dropmenu.vue";
//引入搜素页
import { getSearchData, clearHistory, searchGoods } from "@/utils/http";
//引入商品列表组件
import GoodsList from "@/components/GoodsList.vue";
export default {
  name: "Search",
  data() {
    return {
      keyword: "", //搜索关键字
      page: 1, //默认页数
      size: 10, //每页数据的条数
      order: "desc", //排列顺序 desc由高到低 asc由低到高
      categoryId: 0, //类别id 全部 居家 ...
      sort: "id", //排序方式 根据分类id 还是价格price
      goodsList: [], //商品列表数据
      filterCategory: [], //所有的类名
      searching: false,
  historyData:[],
  hotData:[],
    };
  },
  components: {
    Dropmenu, //下拉菜单组件
    GoodsList,
  },
    created() {
    //初始化获取商品
    this.getData1();
    console.log(2);
  },
  methods: {
    getData1() {
      console.log(111);
            getSearchData().then((res) => {
                console.log(res.data.data);
                this.historyData = res.data.data.historyKeywordList;
                this.hotData = res.data.data.hotKeywordList;
            });
        },
    clear() {
            clearHistory().then((res) => {
                console.log(res);
                this.historyData = res.data.data;
            });
            this.$toast.success("清除成功");
        },
    getData() {
      //获取商品列表
      let params = {
        keyword: this.keyword, //搜索关键字
        page: this.page, //默认页数
        size: this.size, //每页数据的条数
        order: this.order, //排列顺序 desc由高到低 asc由低到高
        categoryId: this.categoryId, //类别id 全部 居家 ...
        sort: this.sort, //排序方式 根据分类id 还是价格price
      };
      searchGoods(params)
        .then((res) => {
          console.log(res);
          this.goodsList = res.data.data.goodsList;
          this.filterCategory = res.data.data.filterCategory;
          // console.log(this.filterCategory);
          //将filterCategory这个数组中的所有name替换成text,将id换成value属性
          this.filterCategory = JSON.parse(
            JSON.stringify(this.filterCategory)
              .replace(/name/g, "text")
              .replace(/id/g, "value")
          );
        })
        .catch((res) => {});
    },

    onSearch() {
      //点击搜索时触发
      this.getData();
      this.searching=true;

    },
    onCancel() {
      // 点击取消处罚
      //返回上一页
      this.$router.go(-1);
    },
    changePriceFn(m) {
      //执行价格排序触发事件
      // console.log(m);
      this.order = m;
      this.sort = "price";
      //修改完成参数,重新获取数据
      this.getData();
    },
    changeKindFn(n){
      //切换类别触发的事件
      this.categoryId=n;
      this.sort = "id";
      //重新获取数据
      this.getData();
    }
  },

};
</script>

<style lang="less" scoped>
.history{
  padding: 3px;
}
.lsjv{
  display: flex;
  justify-content:space-between;
  
}
.jilu{
  font-size: 8px;
}

.hot {
  margin-top: 10px;
  padding: 3px;
    p {
        font-size: 8px;
    }
    
    div {
        display: flex;
        i {
            font-size: 20px;
        }
    }
}
</style>